<template>
  <div class="pre-bridge-tree">
    <!-- 文档位置：https://github.com/zdy1988/vue-jstree/blob/master/README-CN.md -->
    <v-jstree
      v-if="data"
      ref="tree"
      :data="data"
      show-checkbox
      multiple
      collapse
      size="large"
      no-dots
      @item-click="itemClick"
    />
    <div
      class="loading"
      v-else
    >
      <van-loading />
    </div>
    <van-empty
      v-if="data && data.length === 0"
      description="还没有数据"
    />
  </div>
</template>

<script>
import dayjs from "dayjs";
import VJstree from "vue-jstree";
export default {
  name: "PreBridgeTree",
  components: {
    VJstree,
  },
  props: {
    plans: {
      type: Array,
      default: () => []
    },
    date: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      data: null
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    async itemClick(node, item) {
      if (item.bridge) {
        this.$notify.clear()
        item.selected = false
        // 加载
        this.$toast.loading({  message: '加载中...', forbidClick: true });
        let data = await this.api.QUERY_DAY_PLAN_LIST({ pageNo: 1, pageSize: 1, searchName: 'preBridgeId', searchKeyword: item.bridge.id })
        this.$toast.clear()
        if (data.list.length) {
          const addTime = data.list[0].addTime
          const date = addTime.substr(0, 4) + '-' + addTime.substr(4, 2) + '-' + addTime.substr(6, 2)
          this.$notify({ type: 'warning', message: '该预制梁已添加至' + date + '日计划·' });
          item.selected = true
          item.disabled = true
        } else {
          this.$toast.loading({  message: '加载中...', forbidClick: true });
          data = await this.api.CREATE_DAY_PLAN({
            preBridgeId: item.bridge.id,
            beamNo: item.bridge.beamNo,
            status: 1, addTask: 0,
            addTime: dayjs(this.date).format('YYYYMMDD'),
            fieldId: this.$store.state.user.userInfo.unitId
          })
          this.$toast.clear()
          this.$emit('addTask', item.bridge)
          this.$router.go(-1)
        }
      } else {
        item.opened = !item.opened;
      }
    },
    async getTreeData() {
      let tree = await this.api.GET_PREBRIDGE_TREE()

      let treeData = [];
      for (let first in tree) {
        // 第一级别
        let firstObj = { text: first, children: [] }
        for (let second in tree[first]) {
          // 第二级别
          let secondObj = { text: second === '1' ? '左幅' : '右幅', children: [] }
          for (let third in tree[first][second]) {
            // 第三级别
            let thirdObj = { text: third, children: [] }
            for (let fourth of tree[first][second][third]) {
              // 第四级别
              const map = { 1: '未开始', 2: '进行中', 3: '已完成' }
              let select = this.plans.find(item => item.preBridgeId === fourth.id)
              let fourthObj = {
                text: fourth.beamNo + `（${map[fourth.prodStatus]}）`,
                bridge: fourth,
                selected: !!select,
                disabled: !!select,
              }
              thirdObj.children.push(fourthObj)
            }
            secondObj.children.push(thirdObj)
          }
          firstObj.children.push(secondObj)
        }
        treeData.push(firstObj)
      }
      this.$set(this, 'data', treeData)
    },
  },
};
</script>

<style lang="scss" scoped>
.pre-bridge-tree {
  padding: 15px;
  ::v-deep {
    .tree-checkbox {
      display: none;
    }
    .tree-themeicon {
      display: none;
    }
    // .tree-node .tree-node .tree-node .tree-node .tree-themeicon {
    //   display: inline-block;
    // }
    .tree-node .tree-node .tree-node .tree-node .tree-checkbox {
      display: inline-block;
    }

    .tree-node .tree-node .tree-node .tree-node {
      margin-left: 0;
    }

    .tree-node .tree-node .tree-node .tree-node .tree-disabled {
      opacity: 0.3;
    }

    .tree-anchor {
      width: calc(100% - 24px);
      &.tree-selected {
        background: none;
      }
    }
    .tree-ocl {
      transition: all 0.3s;
      background-repeat: no-repeat;
      background-position: center !important;
      background-image: url("./down.svg");
      background-size: 12px 12px;
      transform: rotate(0deg);
    }
    .tree-closed {
      .tree-ocl {
        transform: rotate(-90deg);
      }
    }
  }
  .loading {
    text-align: center;
    padding: 25vw 0;
  }
}
</style>
